import React, { Component, Children } from 'react'

export default class SildeShow extends Component {
  state = {
    total: 0,
    current: 0
    // interval:any
    }
    componentDidMount() {
        const { children } = this.props
        this.setState({
            total: Children.count(children)
        });
        //定时轮播
        this.interval = setInterval(this.showNext,2000)
    }
    componentWillUnmount() {
        clearInterval(this.interval)
    }
    showNext = () => {
        const {total,current}=this.state
        this.setState({
            current:current+1===total?0:current+1
        })
    }
    render() {
        const { children } = this.props;
        const bullets = Array(this.state.total).fill("o");
        bullets[this.state.current] = "o";
        return (
            <div className="slideshow">
                <div className="bullets">{bullets}</div>
                {Children.toArray(children)[this.state.current]}
            </div>
        )
    }
}
